<template>
	<!-- .element::-webkit-scrollbar { width: 0!important } -->
	<div class="loginone">
		<!-- 设置背景视频 -->
		<div class="loginoneone">

		</div>

		<div class="loginonetwo">
			<video src="../public/城市.mp4" webkit-playsinline="true" x5-playsinline playsinline muted autoplay="autoplay"
				loop="loop"
				style=" width: 85vw;height: 99.6vh;margin-left: 7%; ,overflow-y: scroll;border: 0;  scrollbar-width: none;  background-color: rgb(0, 0, 0);">

			</video>
		</div>
		<!-- 登录 -->
		<!-- {{ show }} -->
		<div class="login-body">
			<div class='zhanghao' style="z-index: 1000;" v-if="!show">
				<div
					style="display: inline-block;text-align: center;width: 100%;height: 50px;line-height: 50px;font-size: 30px;margin-top: 10px;margin-bottom: 50px;">
					校园闲置管理平台</div>
				<div style='width: 80%;height: 50px;margin-left: 100px;font-size: 20px;'>
					账号:&nbsp;
					<el-input class="username" v-model="username" placeholder="请输入账号" />
				</div>
				<div style='width: 80%;height: 50px;margin-left: 100px;margin-top: 20px;font-size: 20px;'>
					密码:&nbsp;
					<el-input class="password" v-model="password" placeholder="请输入密码" show-password />
				</div>
				<div style='width: 85%;height: 50px;margin-left: 100px;margin-top: 20px;font-size: 20px;'>
					<el-button type="success" plain @click="changephone" style="margin-left: 15px;">验证码登录</el-button>
					<el-button type="primary" @click="Login" plain style="width: 130px;">登录</el-button>
					<!-- <el-button type="warning" plain>去注册</el-button> -->
				</div>
			</div>
			<div class='yanzhengma' style="z-index: 1000;" v-else>
				<div
					style="text-align: center;width: 100%;height: 50px;line-height: 50px;font-size: 30px;margin-top: 10px;margin-bottom: 50px;">
					校园闲置管理平台
				</div>
				<div style='width: 80%;height: 50px;margin-left: 100px;font-size: 20px;'>
					手机号:&nbsp;
					<el-input class="username2" v-model.number="mobile" placeholder="请输入手机号" />
				</div>
				<div style='width: 80%;height: 50px;margin-left: 100px;margin-top: 20px;font-size: 20px;'>
					验证码:&nbsp;
					<el-input class="password2" v-model="yzm" placeholder="请输入验证码" show-password />
					<el-button @click="getYz" type="primary" v-if="!showyzm">获取验证码</el-button>
					<el-button type="primary" disabled v-else>{{ sj }}秒后重新获取</el-button>
				</div>

				<div style='width: 85%;height: 50px;margin-left: 100px;margin-top: 20px;font-size: 20px;'>
					<el-button type="success" plain @click="changephone" style="margin-left: 15px;">账号密码登录</el-button>
					<el-button :disabled="YZM.length === 0 || yzm.length === 0" type="primary" plain
						style="width: 130px;" @click="Login">登录</el-button>
					<!-- <el-button type="warning" plain>去注册</el-button> -->
				</div>

			</div>
			<!-- <el-alert title="error alert" type="error" /> -->
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import router from '@/router';
	import axios from '../api/index.js';
	const sj = ref(10)
	const showyzm = ref(false)
	const username = ref('')
	const password = ref('')
	const mobile = ref('')
	const YZM = ref('')
	const yzm = ref('')
	const show = ref(true)
	const changephone = () => {
		show.value = !show.value
		username.value = ""
		password.value = ""
		mobile.value = ""
		YZM.value = ""
	}
	// 获取验证码倒计时
	const jishi = () => {
		showyzm.value = true
		let a = setInterval(() => {
			sj.value--
			if (sj.value < 1) {
				// console.log(666666);
				showyzm.value = false
				sj.value = 10
				clearInterval(a)

			}
		}, 1000);
	}
	const getYz = async () => {
		if (mobile.value) {
			if (/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(mobile.value)) {
				jishi()
				const {
					data
				} = await axios.post("http://localhost:3366/zjb/getYz", {
					mobile: mobile.value
				})
				if (data.code === 200) {
					YZM.value = data.num
					ElMessage({
						message: data.message + data.num,
						type: 'success',
					})
				} else {
					ElMessage({
						message: data.message,
						type: 'info',

					})
				}
			} else {
				ElMessage({
					message: '请输入合法手机号！！',
					type: 'error',
				})
			}
		} else {
			ElMessage({
				message: '请输入手机号！！',
				type: 'error',
			})
		}
	}
	// 登录
	const Login = async () => {
		let obj = {}
		if (show.value) {
			obj = {
				mobile: mobile.value,
				num: yzm.value
			}
		} else {
			obj = {
				username: username.value,
				password: password.value
			}
		}
		let {
			data
		} = await axios.post("http://localhost:3366/zjb/login", obj)
		if (data.meta.status === 200) {
			localStorage.setItem("token", data.data.token)
			localStorage.setItem("_id", data.data.id)
			router.push("/home")
		}else{
			ElMessage.info(data.meta.msg)
		}
	}
</script>

<style scoped>
	.loginone {
		position: relative;
	}

	.denglu {
		width: 350px;
		height: 200px;
		margin-left: 100px;
		border-radius: 20px;
	}


	.loginoneone {
		width: 100%;
		height: 100vh;
		background-position: center center;
		background-repeat: no-repeat;
		background: url('../public/bjll.png');
		filter: blur(3px);


	}

	.loginonetwo {
		width: 90%;
		height: 910px;
		position: absolute;
		top: 0;
		z-index: 1000;
	}

	.loginthree {
		width: 600px;
		height: 550px;
		background-color: white;
		border-radius: 20px;
		position: absolute;
		z-index: 10000;
		top: 10%;
		left: 10%;

	}


	.el-alert {
		margin: 20px 0 0;
	}

	.el-alert:first-child {
		margin: 0;
	}

	.login::-webkit-scrollbar {
		display: none;
	}

	.login-body {
		width: 500px;
		height: 330px;
		position: absolute;
		top: 35%;
		left: 35%;
		border-radius: 30px;
		background-color: rgb(255, 255, 255);
		opacity: 0.85;
		/* backdrop-filter: 0.5px; */
		z-index: 10000;
	}

	/* .login-body:hover {
    width: 520px;
    height: 320px;
    position: absolute;
    top: 34%;
    left: 34.5%;
} */
	.username {
		width: 50%;
	}

	.password {
		width: 50%;
	}

	.username2 {
		width: 50%;
	}

	.password2 {
		width: 28%;
		margin-right: 2%;
	}
</style>